<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>我的购物车</title>
	<link rel="icon" href="./img/favicon.ico">

	<link rel="stylesheet" type="text/css" href="./css/all.css" />
	<link rel="stylesheet" type="text/css" href="./css/pages-cart.css" />
	<!-- <link rel="stylesheet" href="./../static/css/all.css">
	<link rel="stylesheet" href="./../static/css/pages-cart.css"> -->
</head>

<body>
	<!--head-->
	<div id="app">
		<!-- 头部栏位 -->
		<!--页面顶部-->
		<div id="nav-bottom">
			<!--顶部-->
			<div class="nav-top">
				<div class="top">
					<div class="py-container">
						<div class="shortcut">
							<ul class="fl">
								<li class="f-item">NXMALL欢迎您！</li>
								<li class="f-item">
									<span class="name">{{ username }}</span>
									<a href="http://mall.nx.netlearning.tech:8181/cas/logout?service=http://mall.web.netlearning.tech/">退出登录</a>　
								</li>
							</ul>
							<div class="fr typelist">
								<ul class="types">
									<li class="f-item"><a href="http://mall.web.netlearning.tech:9103/user/findOrder">我的订单</a></li>
									<li class="f-item"><span>我的购物车</span></li>
									<li class="f-item">我的NXMALL</span></li>
									<li class="f-item"><span>NXMALL会员</span></li>
									<li class="f-item"><span>企业采购</span></li>
									<li class="f-item"><span>关注NXMALL</span></li>
									<li class="f-item"><span>网站导航</span></li>
								</ul>
							</div>

						</div>
					</div>
				</div>

				<!--头部-->
				<div class="header">
					<div class="py-container">
						<div class="yui3-g Logo">
							<div class="yui3-u Left logoArea">
								<a class="logo-bd" title="NXMALL" href="http://mall.web.netlearning.tech/"></a>
							</div>
							<div class="yui3-u Rit searchArea">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>


		<div class="cart py-container" id="cart">
			<!--All goods-->
			<div class="allgoods">
				<h4>全部商品<span></span></h4>
				<div class="cart-main">
					<div class="yui3-g cart-th">
						<div class="yui3-u-1-4"><input :checked="isAllSelected" class="chooseAll" type="checkbox" id="all"
								@click="updateAll" /><label for="all"> 全部</label></div>
						<div class="yui3-u-1-4">商品</div>
						<div class="yui3-u-1-8">单价（元）</div>
						<div class="yui3-u-1-8">数量</div>
						<div class="yui3-u-1-8">小计（元）</div>
						<div class="yui3-u-1-8">操作</div>
					</div>
					<div class="cart-item-list">
						<div class="cart-body">
							<div class="cart-list" v-for="cart in cartList">
								<ul class="goods-list yui3-g">
									<li class="yui3-u-1-24">
										<input type="checkbox" name="chk_list" v-model="cart.checked"
											@click="updateChecked(cart.item.skuId,!cart.checked)" />
									</li>
									<li class="yui3-u-6-24">
										<div class="good-item">
											<div class="item-img"><img :src="cart.item.image" /></div>
											<div class="item-msg">{{cart.item.name}}</div>
										</div>
									</li>
									<li class="yui3-u-5-24">
										<div class="item-txt"></div>
									</li>
									<li class="yui3-u-1-8"><span class="price">{{(cart.item.price/100).toFixed(2)}}</span></li>
									<li class="yui3-u-1-8">
										<a class="increment mins" @click="addItem(cart.item.skuId,-1)">-</a>
										<input autocomplete="off" type="text" v-model="cart.item.num" minnum="1" class="itxt" />
										<a class="increment plus" @click="addItem(cart.item.skuId,1)">+</a>
									</li>
									<li class="yui3-u-1-8"><span class="sum">{{(cart.item.price*cart.item.num/100).toFixed(2)}}</span>
									</li>
									<li class="yui3-u-1-8">
										<a href="javascript:void(0)" @click="addItem(cart.item.skuId,-cart.item.num)">删除</a><br />
									</li>
								</ul>
							</div>

						</div>
					</div>
				</div>
				<div class="cart-tool">
					<div class="option">
						<a @click="deleteCheckedCart()">删除选中的商品</a>
					</div>
					<div class="money-box">
						<div class="chosed">已选择<span>{{totalNum}}</span>件商品</div>
						<div class="sumprice">
							<span><em>总价（不含运费）：</em><i class="summoney">¥{{(totalMoney/100).toFixed(2)}}</i></span>
							<span><em>已节省：</em><i>¥{{(preferential/100).toFixed(2)}}</i></span>
						</div>
						<div class="sumbtn">
							<a class="sum-btn" href="javascript:void(0)" @click="goPay">结算</a>
						</div>
					</div>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
		<!-- 底部栏位 -->
		<!--页面底部-->
		<div class="clearfix footer">
			<div class="py-container">
				<div class="footlink">
					<div class="Mod-service">
						<ul class="Mod-Service-list">
							<li class="grid-service-item intro  intro1">

								<i class="serivce-item fl"></i>
								<div class="service-text">
									<h4>正品保障</h4>
									<p>正品保障，提供发票</p>
								</div>

							</li>
							<li class="grid-service-item  intro intro2">

								<i class="serivce-item fl"></i>
								<div class="service-text">
									<h4>正品保障</h4>
									<p>正品保障，提供发票</p>
								</div>

							</li>
							<li class="grid-service-item intro  intro3">

								<i class="serivce-item fl"></i>
								<div class="service-text">
									<h4>正品保障</h4>
									<p>正品保障，提供发票</p>
								</div>

							</li>
							<li class="grid-service-item  intro intro4">

								<i class="serivce-item fl"></i>
								<div class="service-text">
									<h4>正品保障</h4>
									<p>正品保障，提供发票</p>
								</div>

							</li>
							<li class="grid-service-item intro intro5">

								<i class="serivce-item fl"></i>
								<div class="service-text">
									<h4>正品保障</h4>
									<p>正品保障，提供发票</p>
								</div>

							</li>
						</ul>
					</div>
					<div class="clearfix Mod-list">
						<div class="yui3-g">
							<div class="yui3-u-1-6">
								<h4>购物指南</h4>
								<ul class="unstyled">
									<li>购物流程</li>
									<li>会员介绍</li>
									<li>生活旅行/团购</li>
									<li>常见问题</li>
									<li>购物指南</li>
								</ul>

							</div>
							<div class="yui3-u-1-6">
								<h4>配送方式</h4>
								<ul class="unstyled">
									<li>上门自提</li>
									<li>211限时达</li>
									<li>配送服务查询</li>
									<li>配送费收取标准</li>
									<li>海外配送</li>
								</ul>
							</div>
							<div class="yui3-u-1-6">
								<h4>支付方式</h4>
								<ul class="unstyled">
									<li>货到付款</li>
									<li>在线支付</li>
									<li>分期付款</li>
									<li>邮局汇款</li>
									<li>公司转账</li>
								</ul>
							</div>
							<div class="yui3-u-1-6">
								<h4>售后服务</h4>
								<ul class="unstyled">
									<li>售后政策</li>
									<li>价格保护</li>
									<li>退款说明</li>
									<li>返修/退换货</li>
									<li>取消订单</li>
								</ul>
							</div>
							<div class="yui3-u-1-6">
								<h4>特色服务</h4>
								<ul class="unstyled">
									<li>夺宝岛</li>
									<li>DIY装机</li>
									<li>延保服务</li>
									<li>NXMALLE卡</li>
									<li>NXMALL通信</li>
								</ul>
							</div>
							<div class="yui3-u-1-6">
								<h4>帮助中心</h4>
								<img src="./img/wx_cz.jpg">
							</div>
						</div>
					</div>
					<div class="Mod-copyright">
						<ul class="helpLink">
							<li>关于我们<span class="space"></span></li>
							<li>联系我们<span class="space"></span></li>
							<li>关于我们<span class="space"></span></li>
							<li>商家入驻<span class="space"></span></li>
							<li>营销中心<span class="space"></span></li>
							<li>友情链接<span class="space"></span></li>
							<li>关于我们<span class="space"></span></li>
							<li>营销中心<span class="space"></span></li>
							<li>友情链接<span class="space"></span></li>
							<li>关于我们</li>
						</ul>
						<p>地址：北京市海淀区建材城东路金隅智造工场 邮编：100096 </p>
						<p>京ICP备21001421号京公网安备110102108808</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!--页面底部END-->
	<script type="text/javascript" src="./js/plugins/jquery/jquery.min.js"></script>
	<script type="text/javascript">
		$(".chooseAll").click(function () {
			$("input[name='chk_list']").prop("checked", $(this).prop("checked"));
		})
	</script>

</body>

<script src="/js/vue.js"></script>
<script src="/js/axios.js"></script>
<!-- <script src="./../static/js/vue.js"></script>
<script src="./../static/js/axios.js"></script> -->
<script>
	new Vue({
		el: '#app',
		data() {
			return {
				cartList: [],
				totalNum: 0, //总数量
				totalMoney: 0, //总金额
				username: "",
				preferential: 0 //优惠金额
			}
		},
		computed: {
			isAllSelected() {
				if (!this.cartList.length) return false
				return (this.cartList.every(v => v.checked))
			}
		},
		created() {
			this.findCartList();//查询列表

			axios.get(`http://mall.web.netlearning.tech:9104/login/username`).then(response => {
				console.log("username:", response)
				this.username = response.data.username;
			})
		},
		methods: {
			findCartList() {
				axios.get(`/cart/findCartList`).then(response => {
					this.cartList = response.data;
					console.log('this.cartList', this.cartList);
					console.log('this.isAllSelected', this.isAllSelected);
					this.count();//更新合计数
				})
			},
			addItem(skuId, num) {
				axios.get(`/cart/addItem?skuId=${skuId}&num=${num}`).then(response => {
					this.findCartList();
				});
			},
			updateChecked(skuId, checked) {
				axios.get(`/cart/updateChecked?skuId=${skuId}&checked=${checked}`).then(response => {
					this.count();//更新合计数
				});
			},
			updateAll() {
				if (this.isAllSelected) {
					this.cartList.forEach(v => {
						v.checked = false
					})
				} else {
					this.cartList.forEach(v => {
						v.checked = true
					})
				}
			},
			count() {
				this.totalNum = 0;  //数量
				this.totalMoney = 0; //金额
				//循环购物车
				for (var i = 0; i < this.cartList.length; i++) {
					if (this.cartList[i].checked) { //判断如果选中，数量和金额累加
						this.totalNum += this.cartList[i].item.num;
						this.totalMoney += this.cartList[i].item.money;
					}
				}
				//计算优惠金额
				axios.get(`/cart/preferential`).then(response => {
					this.preferential = response.data.preferential;
					this.totalMoney = this.totalMoney - this.preferential;//最后的总金额
				});
			},
			deleteCheckedCart() { //删除选择的商品
				const isChecked = this.cartList.some(v => v.checked)
				if (!isChecked) {
					alert('请选择要删除的商品')
				} else {
					const skuIds = []
					this.cartList.forEach(v => {
						if (v.checked) {
							skuIds.push(v.item.skuId)
						}
					})
					axios.get(`/cart/deleteCheckedCart?skuId=${skuIds.toString()}`).then(response => {
						this.findCartList();
					});
				}
			},
			goPay() {
				const isChecked = this.cartList.some(v => v.checked)
				if (!isChecked) {
					alert('请选择要付款的商品！')
				} else {
					window.location.href = 'order.html'
				}
			}
		}
	})
</script>

</html>
